<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Adminity - Tables</title>
  <link rel="shortcut icon" href="favicon.gif">
  <!---CSS Files-->
  <link rel="stylesheet" href="../static/css/master.css">
  <link rel="stylesheet" href ="../static/css/tables.css">
  <link rel="stylesheet" href ="../static/bootstrap-3/css/bootstrap.min.css">
  <!---jQuery Files-->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!--  <script src="../static/js/jquery-1.7.1.min.js"></script>-->
  <script src="../static/js/jquery-ui-1.8.17.min.js"></script>
  <script src="../static/js/styler.js"></script>
  <script src="../static/js/jquery.tipTip.js"></script>
  <script src="../static/js/colorpicker.js"></script>
  <script src="../static/js/sticky.full.js"></script>
  <script src="../static/js/global.js"></script>
  <script src="../static/js/jquery.dataTables.min.js"></script>
  <script src="../static/bootstrap-3/js/bootstrap.min.js"></script>
  <!---Fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!--[if lte IE 8]>
  <script language="javascript" type="text/javascript" src="../static/js/flot/excanvas.min.js"></script>
  <![endif]-->
  <style>
    #fenye {
      text-align: center;
    }
    /* 弹窗样式 */
    .modal {
      display: none; /* 默认隐藏 */
      position: fixed; /* 固定位置 */
      z-index: 1; /* 在顶层 */
      padding-top: 100px; /* 离顶部的距离 */
      left: 0;
      top: 0;
      width: 100%; /* 宽度全屏 */
      height: 100%; /* 高度全屏 */
      overflow: auto; /* 启用滚动 */
      background-color: rgb(0,0,0); /* 黑色背景 */
      background-color: rgba(0,0,0,0.4); /* 黑色背景，半透明 */
    }

    /* 表单样式 */
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%; /* 宽度80% */
    }

    /* 关闭按钮样式 */
    .close-button {
      position: absolute;
      top: 15px;
      right: 35px;
      cursor: pointer;
    }
    /*错误提示弹窗*/
    .alert {
      padding: 15px;
      background-color: #f44336;
      color: white;
      display: none;
    }
    /*  正确提示弹窗*/
    .success-alert {
      padding: 15px;
      background-color: #4CAF50;
      color: white;
      display: none;
    }
  </style>
</head>

<body>

<!--- HEADER -->
<div id="alert" class="alert">

</div>
<div id="successAlert" class="success-alert">

</div>
<div class="header">
  <a href="dashboard.html"><img src="../static/img/logo.png" alt="Logo" /></a>
  <div class="styler">
    <ul class="styler-show">
      <li><div id="colorSelector-top-bar"></div></li>
      <li><div id="colorSelector-box-head"></div></li>
    </ul>
  </div>
</div>

<div class="top-bar">
  <ul id="nav">
    <li id="user-panel">
      <img src="../static/img/nav/usr-avatar.jpg" id="usr-avatar" alt="" />
      <div id="usr-info">
        <p id="usr-name">欢迎 回来, {{.user.Username}}</p>
        <p><a href="#" onclick="document.getElementById('myMessage').style.display='block'">用户基本信息</a><a href="/quitLogin">退出登录</a></p>
      </div>
    </li>
    <li>
      <ul id="top-nav">
        <li class="nav-item">
          <a href="typography.html"><img src="../static/img/nav/typ.png" alt="" /><p>数据分析预览</p></a>
        </li>
        <li class="nav-item">
          <a href="#"><img src="../static/img/nav/grid.png" alt="" /><p>营销管理</p></a>
          <ul class="sub-nav">
            <li><a href="/listMarketingOpportunities">营销机会管理</a></li>
            <li><a href="/listCustomerDevelopmentPlans">客户开发计划</a></li>
          </ul>
        </li><li class="nav-item">
        <a href="#"><img src="../static/img/nav/gal.png" alt="" /><p>客户管理</p></a>
        <ul class="sub-nav">
          <li><a href="/selectCustomers">客户信息管理</a></li>
          <li><a href="/listRunAwayCustomers">流失客户管理</a></li>
        </ul>
      </li>
        <li class="nav-item">
          <a href="#"><img src="../static/img/nav/flm.png" alt="" /><p>服务管理</p></a>
          <ul class="sub-nav">
            <li><a href="/listService">服务信息管理</a></li>
            <li><a href="/toSalesOrders">服务订单生成</a></li>
            <li><a href="/listSalesOrders">订单存档管理</a></li>
          </ul>
        </li>

      </ul>
    </li>
  </ul>
</div>

<!-- 添加数据弹窗 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <h2>客户信息添加</h2>
    <form id="dataForm">
      <label for="customerName">客户名称:</label><br>
      <input type="text" id="customerName" name="name"><br>
      <label for="contactsName">联系人名称:</label><br>
      <input type="text" id="contactsName" name="email"><br>
      <label for="ContactInfo">联系人联系账号:</label><br>
      <input type="text" id="ContactInfo" name="email"><br>
      <label for="customerAddress">客户地址:</label><br>
      <input type="text" id="customerAddress" name="email"><br>
      <label for="customerDescribe">客户信息概述:</label><br>
      <input type="text" id="customerDescribe" name="email"><br>
      <label for="legal">法人:</label><br>
      <input type="text" id="legal" name="email"><br>
      <label for="rank">级别:</label><br>
      <input type="text" id="rank" name="email"><br>
      <input type="button" value="提交" id="btn">
    </form>
    <button class="close-button" onclick="document.getElementById('myModal').style.display='none'">关闭</button>
  </div>
</div>
<!-- 显示个人信息 -->
<div id="myMessage" class="modal">
  <div class="modal-content">
    <h2>用户信息</h2>
    <form id="dataForm23">
      <label>用户名称: {{.user.Username}}</label><br>
    </form>
    <button class="close-button" onclick="document.getElementById('myMessage').style.display='none'">关闭</button>
  </div>
</div>
<!-- 修改数据弹窗 -->
<div id="myModal2" class="modal">
  <div class="modal-content">
    <h2>客户信息修改</h2>
    <form id="dataForm2">
      <!--      隐藏的元素,用于保存id值-->
      <input type="text" id="updateId" style="display: none;" />
      <label for="updateCustomerName">客户名称:</label><br>
      <input type="text" id="updateCustomerName" name="name"><br>
      <label for="updateContactsName">联系人姓名:</label><br>
      <input type="text" id="updateContactsName" name="email"><br>
      <label for="updateContactsInfo">联系人联系方式:</label><br>
      <input type="text" id="updateContactsInfo" name="email"><br>
      <label for="updateCustomerAddress">客户地址:</label><br>
      <input type="text" id="updateCustomerAddress" name="email"><br>
      <label for="updateCustomerDescribe">客户概述:</label><br>
      <input type="text" id="updateCustomerDescribe" name="email"><br>
      <label for="updateLegal">法人:</label><br>
      <input type="text" id="updateLegal" name="email"><br>
      <label for="updateCustomerRank">级别:</label><br>
      <input type="text" id="updateCustomerRank" name="email"><br>
      <label for="drainCause">流失原因:</label><br>
      <input type="text" id="drainCause" name="email"><br>
      <input type="button" value="提交" id="updateBtn">
    </form>
    <button class="close-button" onclick="document.getElementById('myModal2').style.display='none'">关闭</button>
  </div>
</div>
<!--- CONTENT AREA -->

<div class="content container_12">

  <div class="box grid_12">
    <div class="box-head"><h2>客户信息管理</h2></div>
    <div class="box-content no-pad">
      <ul class="table-toolbar">
        <li><a href="#" onclick="document.getElementById('myModal').style.display='block'"><img src="../static/img/icons/basic/plus.png" alt="" /> 添加</a></li>
        <li><a href="#" id="submitButton"><img src="../static/img/icons/basic/delete.png" alt="" /> 删除</a></li>
        <!--       <li><a href="#" onclick="document.getElementById('myModal2').style.display='block'"><img src="../static/img/icons/basic/save.png" alt="" /> 编辑</a></li>-->
        <li><a href="#" id="updateSelect"><img src="../static/img/icons/basic/save.png" alt="" /> 编辑</a></li>
        <li><input type="text" id="keyWord1" placeholder="请输入服务名称"></li>
        <li><input type="text" id="keyWord2" placeholder="请输入服务状态"></li>
        <li><a id="keyWordSelect"><img src="../static/img/icons/basic/up.png" alt=""/>搜索</a></li>
        <!--        <li><a href="#"><img src="../static/img/icons/basic/down.png" alt="" /> 下移</a></li>-->
      </ul>

      <table class="display" id="dt2">
        <thead>
        <tr>
          <th>选择</th>
          <th>客户id</th>
          <th>客户名称</th>
          <th>客户地址</th>
          <th>添加时间</th>
          <th>修改时间</th>
          <th>客户描述</th>
          <th>公司法人</th>
          <th>客户编号</th>
          <th>客户级别</th>
          <th>联系人姓名</th>
          <th>联系人电话</th>
        </tr>
        </thead>
        <tbody id="Customer">
        {{range $key,$val := .customer}}
        <tr class="odd gradeX">
          <td><input type="radio" id="option1" name="option" value="{{$val.CustomerID}}"></td>
          <td>{{$val.CustomerID}}</td>
          <td>{{$val.CustomerName}}</td>
          <td>{{$val.CustomersAddress}}</td>
          <td>{{$val.AddTime}}</td>
          <td>{{$val.UpdateTime}}</td>
          <td>{{$val.CustomerDescribe}}</td>
          <td>{{$val.LegalPerson}}</td>
          <td>{{$val.CustomersNum}}</td>
          <td>{{$val.CustomerRank}}</td>
          <td>{{$val.Contacts.ContactName}}</td>
          <td>{{$val.Contacts.ContactInfo}}</td>
        </tr>
        {{end}}
        </tbody>
      </table>
      <div>
        <nav aria-label="Page navigation example" id="fenye" >
          <ul class="pagination">
            {{ $TotalCount := .page.TotalCount }}
            {{ $currentPage := .page.CurrentPage }}
            {{ $TotalPages := .page.TotalPages }}
            {{ if gt $TotalCount 0 }}
            <li class="page-item"><a class="page-link" href="/selectCustomers?pageNo=1">首页</a></li>
            <li class="page-item">
              <a class="page-link" href="/selectCustomers?pageNo={{minusOne $currentPage}}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
            {{range $i, $e := until $TotalPages}}
            <li class="page-item"><a class="page-link" href="/selectCustomers?pageNo={{$e}}">{{$e}}</a></li>
            {{end}}
            <li class="page-item">
              <a class="page-link" href="/selectCustomers?pageNo={{add $currentPage}}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="/selectCustomers?pageNo={{$TotalPages}}">尾页</a></li>
            {{ end }}
          </ul>
        </nav>

      </div>
    </div>
  </div>
</div>
<div class="footer">
  <p>Powered by Adminity Administration Interface</p>
</div>

<script> /* SCRIPTS */
$(function () {
  $('#dt1').dataTable( {
    "bJQueryUI": true
  });
  $('#dt2').dataTable( {
    "bJQueryUI": true
  });
  $('#dt3').dataTable( {
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"
  }); /*   For the data tables */
});
</script>


</body>
<script>
  <!--  添加数据-->
  $('#btn').click(function(){
    var customerName = $('#customerName').val();
    var contactsName = $('#contactsName').val();
    var ContactInfo = $('#ContactInfo').val();
    var customerAddress = $('#customerAddress').val();
    var describe = $('#describe').val();
    var legal = $('#legal').val();
    var rank = $('#rank').val();
    // 获取input下name=sex的选项
    //var sex = $('input[name=sex]:checked').val();
    //var age=parseInt(a)
    $.ajax({
      url: '/addCustomers', // 后端控制器路由地址
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        customer_name:customerName,
        contacts:{
          contact_info:ContactInfo,
          contact_name:contactsName
        },
        customers_address:customerAddress,
        customer_describe:describe,
        legal_person:legal,
        customer_rank:rank
      }),
      success: function(response) {
        if (response.code===200) {
          // $('#result').html('<p>登录成功！</p>');
          var elementById = document.getElementById("successAlert");
          elementById.textContent = response.message;
          elementById.style.display = "block";
          setTimeout(function(){
            document.getElementById("successAlert").style.display = "none";
            window.location.href="/selectCustomers"
          }, 3000);
        } else {
          // $('#result').html('<p>登录失败：' + response.message + '</p>');
          var elementById2 = document.getElementById("alert");
          elementById2.textContent = response.message;
          elementById2.style.display = "block";
          setTimeout(function(){
            elementById2.style.display = "none";
            window.location.href="/selectCustomers"
          }, 3000);
        }
      },
      error: function(xhr, status, error) {
        console.log('Error occurred: ' + error);
      }
    });
  })
</script>
<script>
  <!--  删除数据-->
  // 获取单选框的值
  document.getElementById('submitButton').addEventListener('click', function() {
    var selectedOption = document.querySelector('input[name="option"]:checked');
    var id = parseInt(selectedOption.value)
    $.ajax({
      url: '/deleteCustomers', // 后端控制器路由地址
      type: 'DELETE',
      dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        customer_id:id
      }),
      success: function(response) {
        if (response.code===200) {
          // $('#result').html('<p>登录成功！</p>');
          var elementById = document.getElementById("successAlert");
          elementById.textContent = response.message;
          elementById.style.display = "block";
          setTimeout(function(){
            document.getElementById("successAlert").style.display = "none";
            window.location.href="/selectCustomers"
          }, 3000);
        } else {
          // $('#result').html('<p>登录失败：' + response.message + '</p>');
          var elementById2 = document.getElementById("alert");
          elementById2.textContent = response.message;
          elementById2.style.display = "block";
          setTimeout(function(){
            elementById2.style.display = "none";
            window.location.href="/selectCustomers"
          }, 3000);
        }
      },
      error: function(xhr, status, error) {
        console.log('Error occurred: ' + error);
      }
    });
  });
</script>
<!--展示单条要修改数据-->
<script>
  document.getElementById('updateSelect').addEventListener('click', function() {
    var selectedOption = document.querySelector('input[name="option"]:checked');
    var id = parseInt(selectedOption.value)
    $.ajax({
      url: '/selectUpdateCustomers', // 后端控制器路由地址
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        customer_id:id
      }),
      success: function(data) {
        //后端拿到数据之后进行添加
        $('#updateId').val(data.CustomerID);
        $('#updateCustomerName').val(data.CustomerName);
        $('#updateContactsName').val(data.ContactName);
        $('#updateContactsInfo').val(data.ContactInfo);
        $('#updateCustomerAddress').val(data.CustomersAddress);
        $('#updateCustomerDescribe').val(data.CustomerDescribe);
        $('#updateLegal').val(data.LegalPerson);
        $('#updateCustomerRank').val(data.CustomerRank);
        $('#drainCause').val(data.DrainCause);
        //赋值之后让弹唱其显示出来
        document.getElementById('myModal2').style.display='block'
      },
      error: function(xhr, status, error) {
        console.log('Error occurred: ' + error);
      }
    });
  });
</script>
<script>
  // <!--  修改数据-->
  document.getElementById('updateBtn').addEventListener('click', function() {
    //用于获取对应的值
    var selectedOption = document.querySelector('input[name="option"]:checked');
    var id = parseInt(selectedOption.value)
    var updateCustomerName = $('#updateCustomerName').val();
    var updateContactsName = $('#updateContactsName').val();
    var updateContactsInfo = $('#updateContactsInfo').val();
    var updateCustomerAddress = $('#updateCustomerAddress').val();
    var updateCustomerDescribe = $('#updateCustomerDescribe').val();
    var updateLegal = $('#updateLegal').val();
    var updateCustomerRank = $('#updateCustomerRank').val();
    var drainCause = $('#drainCause').val();
    // 获取input下name=sex的选项
    //var sex = $('input[name=sex]:checked').val();
    //var age=parseInt(a)
    $.ajax({
      url: '/updateCustomers', // 后端控制器路由地址
      type: 'PUT',
      dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        customer_id:id,
        customer_name:updateCustomerName,
        customers_address:updateCustomerAddress,
        customer_describe:updateCustomerDescribe,
        legal_person:updateLegal,
        contacts:{
          contact_name:updateContactsName,
          contact_info:updateContactsInfo
        },
        customer_rank:updateCustomerRank,
        drain_cause:drainCause
      }),
      success: function(response) {
        if (response.code===200) {
          // $('#result').html('<p>登录成功！</p>');
          var elementById = document.getElementById("successAlert");
          elementById.textContent = response.message;
          elementById.style.display = "block";
          setTimeout(function(){
            document.getElementById("successAlert").style.display = "none";
            window.location.href="/selectCustomers"
          }, 3000);
        } else {
          // $('#result').html('<p>登录失败：' + response.message + '</p>');
          var elementById2 = document.getElementById("alert");
          elementById2.textContent = response.message;
          elementById2.style.display = "block";
          setTimeout(function(){
            elementById2.style.display = "none";
            window.location.href="/selectCustomers"
          }, 3000);
        }
      },
      error: function(xhr, status, error) {
        console.log('Error occurred: ' + error);
      }
    });
  });
</script>
<script>
  <!--  关键字搜索-->
  $('#keyWordSelect').click(function(){
    var serviceName = $('#keyWord1').val();
    var  serviceStatus= $('#keyWord2').val();
    // 获取input下name=sex的选项
    //var sex = $('input[name=sex]:checked').val();
    //var age=parseInt(a)
    $.ajax({
      url: '/keyWordSelectCustomers', // 后端控制器路由地址
      type: 'POST',
      //dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        legal_person:serviceName,
        customer_name:serviceStatus
      }),
      success: function(data) {
        //返回的data是一个页面代码
        // 创建一个临时的 div 元素，将返回的 HTML 数据插入其中
        var tempDiv = $("<div>").html(data);

        // 从临时 div 中选择特定的元素
        var opportunitiesHtml = tempDiv.find("#Customer").html();

        // 将提取到的 HTML 数据插入到页面中的另一个元素中
        $("#Customer").html(opportunitiesHtml);
        //关闭分页,因为这里有ui来进行显示
        document.getElementById('fenye').style.display='none'
      }
      // success: function(response) {
      //   // 处理返回的JSON数据
      //   //alert("返回的数据："+response.message)
      //   console.log(response)
      //   console.log(response.success)
      //   // if (response.code===200) {

      // },
      // error: function(xhr, status, error) {
      //   console.log('Error occurred: ' + error);
      // }
    });
  })
</script>
</html>